<!DOCTYPE html>
<html lang="en">
<head>
    <!--NOTE: Most Web WorldWind examples use jquery, Bootstrap and requirejs but those technologies are NOT-->
    <!--required by Web WorldWind. See SimplestExample.html for an example of using Web WorldWind without them.-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script data-main="Collada/Collada"
            src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>

    <style>
        .my-slider {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="jumbotron hidden-xs">
        <h1 style="text-align:center">WorldWind Collada Example</h1>
    </div>
    <div class="row">
        <div class="col-sm-3">
            <h4>Projection</h4>

            <ul class="nav nav-pills">
                <li class="dropdown" id="projectionDropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="projectionDropdownTitle">3D
                        <span class="caret"></span></a></li>
            </ul>

            <br>

            <h4>Models</h4>
            <br>
            <div class="dropdown" id="collada-models">
                <button class="btn btn-default dropdown-toggle" type="button" id="modelDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    <span id="button-value">Select a model</span>
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="modelDropdownMenu" id="model-list">
                </ul>
            </div>
            <br>

            <div style="background-color: #ededed; padding: 20px;">
                <p id="scale">Scale: <span id="scaleSpan"></span></p>

                <div id="sliderScale" class="my-slider"></div>

                <p>Rotate X: <span id="spanRotateX">0</span></p>

                <div id="sliderRotateX" class="my-slider"></div>

                <p>Rotate Y: <span id="spanRotateY">0</span></p>

                <div id="sliderRotateY" class="my-slider"></div>

                <p>Rotate Z: <span id="spanRotateZ">0</span></p>

                <div id="sliderRotateZ" class="my-slider"></div>
            </div>

        </div>
        <div class="col-sm-9" id="globe">
            <canvas id="canvasOne" width="1000" height="1000" style="width: 100%; height: auto">
                Your browser does not support HTML5 Canvas.
            </canvas>
        </div>
    </div>
</div>

</body>
</html>